<template>
    <div>
        <div class="meal-cell-up">
            <span class="iconfont icon-face"></span>
            <span class="meal-name">{{goods.names}}</span>
            <span class="iconfont icon-toright"></span>
        </div>
        <div class="meal-cell-middle">
            <div class="cell-info">
                <div class="cell-info-left">
                    <img class="my-img-meal" :src="goods.url"/>
                </div>
                <div class="cell-info-right">
                    <p class="buy-time">购买时间：{{goods.buytm}}</p>
                    <span class="medal">正品</span>
                    <span class="medal">优质服务</span>
                </div>
            </div>
            <div class="price-div">
                <span class="symbol">&yen;</span><span class="price">{{goods.price}}</span>
            </div>
            <div v-if="goods.buyNum!=1" class="num-div">
                <span class="num">{{goods.buyNum}}</span>
            </div>
        </div>
        <div class="meal-cell-down">
            <div v-show="!goods.hadUesed" class="middle-item click-item">查看礼品券</div>
            <div v-show="goods.hadUesed" class="middle-item click-item had-used">已使用</div>
        </div>
    </div>
</template>

<script>
import Vue from "vue";
import { mapState } from "vuex";
import { Button } from "mint-ui";
import "mint-ui/lib/button/style.css";
Vue.component(Button.name, Button);
import myImage from "../../lazyloadImg/lazyImage.vue";

export default {
  name: "meal-cell",
  data() {
    return {};
  },
  props: {
    goods: {
      type: Object,
      default: function() {
        return {
          url: "https://www.jubenxiong.com/aml/img/nx_1515661463680.png",
          names: "380美容套餐",
          dec: "",
          buytm: "2018-01-20",
          passtm: "2018-02-20",
          price: 333,
          hadUesed: true,
          id: "",
          buyid: "",
          buyNum:1
        };
      }
    }
  },
  components: { myImage },
  activated() {},
  created() {},
  computed: {
    ...mapState(["openid", "path", "role","soursePath"])
  },
  methods: {}
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.meal-cell-up {
    font-family: 'Arial';
    width: 100%;
    height: 0.32rem;
    color: #303030;
    display: flex;
    align-items: center;

    .icon-face {
        padding-left: 0.1rem;
        font-size: 0.2rem;
    }

    .meal-name {
        font-size: 0.14rem;
        font-weight: 700;
        margin-left: 0.04rem;
    }

    .icon-toright {
        font-size: 0.12rem;
        color: #8a8a8a;
        margin-left: 0.02rem;
        font-weight: 700;
        position: relative;
        top: 0.01rem;
    }
}

.meal-cell-middle {
    position relative;
    margin-right: 0.12rem;
    background-color: #efefef;
    border-radius: 0 0.15rem 0 0;
    display: flex;
    justify-content: space-between;

    .cell-info {
        display: flex;
        padding: 0.07rem 0 0.1rem 0;
        align-items: center;
        min-height: 0.6rem;

        .cell-info-left {
            margin-left: 0.1rem;
            margin-right: 0.08rem;

            .my-img-meal {
                width: auto;
                height: 0.56rem;
                background-color: #f1f1f1;
            }
        }

        .cell-info-right {

            .buy-time {
                margin-bottom: 0.04rem;
                font-size: 0.13rem;
                line-height: 0.14rem;
                color: #999;
                // margin-bottom: 0.01rem;
            }

            .medal {
                display: inline-block;
                color: #f2a5ba;
                font-size: 0.12rem;
                padding: 0.03rem 0.04rem 0.01rem 0.04rem;
                border-radius: 0.04rem;
                border: 1px #f2a5ba solid;
                margin-right: 0.01rem;
            }
        }
    }

    .price-div {
        margin-right: 0.1rem;
        align-self: center;
        color: #e61874;

        .symbol {
            font-size: 0.13rem;
            margin-right: 0.02rem;
        }

        .price {
            font-size: 0.15rem;
        }
    }

    .num-div{
        position: absolute;
        right: 0px;
        bottom: -3px;
        transform: translate(0, -50%);
        text-align: center;
        .num{
            display inline-block;
            font-size: 12px;
            color: #fff;
            padding: 1px 4px 1px 6px;
            background-color #7B808D;
            border-radius 50% 0 0px 50%;
        }
    }
}

.meal-cell-down {
    width: 100%;
    height: 0.32rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .middle-item {
        margin-right: 0.12rem;

        &.had-used {
            color: #999;
            font-size: 0.12rem;
        }
    }

    .click-item {
        color: #303030;
        font-size: 0.12rem;
        padding: 0.03rem 0.07rem 0.02rem 0.07rem;
        border-radius: 0.15rem;
        border: 1px #acacac solid;
    }
}
</style>
